@extends('admin.layout.layout')
@section('title')
<title>北京仁爱慈善后台</title>
@endsection
@section('style')
<style type="text/css">
*{margin: 0;padding: 0;list-style:none;}
#all{width: 690px;margin-top: 50px;margin-left: 20px;}
#option{
  height: 38px;line-height:38px;
  border-bottom:1px solid #999;
  border-left:1px solid #999;
}
#option li{
  float: left;padding: 0 30px;
  background: #f5f5f5;
  border-right:1px solid #999;
  border-top:1px solid #999;
  height: 37px;cursor:pointer;
}
#card{
  border:1px solid #999;border-top:none;
}
#card li{
  height: 220px;padding: 20px;display:none;
}

#option li.active{
  height: 38px;
  background: #fff;
}
#card li.active{
  display:block;
}
</style>
@endsection
@section('content')
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">选项卡</h1>
    </div>
</div>
<div class="row">
    <div id="all">
      <ul id="option">

        <li class="active"></li>

      </ul>
      <ul id="card">
        <li class="active">
            <img src="" style="width:200px;height:80px;float:left;margin-left:10px;margin-top:10px;">
            <img src="" style="width:200px;height:80px;float:left;margin-left:10px;margin-top:10px;">
            <img src="" style="width:200px;height:80px;float:left;margin-left:10px;margin-top:10px;">
            <img src="" style="width:200px;height:80px;float:left;margin-left:10px;margin-top:10px;">
            <img src="" style="width:200px;height:80px;float:left;margin-left:10px;margin-top:10px;">
            <img src="" style="width:200px;height:80px;float:left;margin-left:10px;margin-top:10px;">
        </li>

      </ul>
    </div>
</div>
@endsection
@section('js')
<script type="text/javascript">
    //获取所有的选项
    var options = document.getElementById('option').getElementsByTagName('li');
    //获取所有卡片
    var cards = document.getElementById('card').getElementsByTagName('li');
    //给所有选项绑定单击事件
    for (var i = 0; i < options.length; i++) {
      //给选项添加属性  代表它当前的下标
      options[i].index = i;
      //给所有选项绑定单击事件
      options[i].onclick = function()
      {
        //当前点击的选项加上active,其它选项都移出 active
        for (var j = 0; j < options.length; j++) {
          //所有选项移出class
          options[j].className = '';
          cards[j].className = '';
        }
        //当前选项添加 class
        this.className = 'active';
        //当前卡 添加 class
        cards[this.index].className = 'active';
      }
    }
</script>
@endsection
